﻿<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<title>Kid World Web</title>
<meta name="description" content="Kid World Web" />
<link href="image/data/logo.png" rel="icon" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

  <script src="js/modernizr.foundation.js"></script>


  <!-- Included JS Files (Compressed)  -->
  <script>
	
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/zepto' : 'js/jquery') +
  '.js><\/script>')
  </script>
	<script src="js/jquery.js"></script>
	<script>
		$.noConflict();
	</script>
</head>
<body>
  <div id="header" class="row">
		<div class="large-5 columns">
			<div id="logo">
				<a href="#">
					<img src="image/data/text-logo.png" title="Kid World Web" alt="Kid World Web">
				</a>
			</div>
		</div>
		<div class="large-6 large-offset-1 columns" align="right">
			<div id="account">
					<a href="#">Đăng ký tài khoản</a>
					<a id="cart" href="#">Giỏ hàng<img id="carticon" src="image/data/cart.png"/></a>
			</div>
		</div>
		<div id="searchbox" class="hide-for-small">
			<input type="text" placeholder="Tìm kiếm"/>
		</div>
	</div>
  <div class="row hide-for-small">
		<div id="menu">
			<ul>
				<li>
					<a href="#">
						<img id="homelogo" src="image/data/home.png"/>
					</a>
				</li>
				<li>
					<a href="#" style="color:#64bc7f">Đồ dùng sơ sinh</a><span>/</span>
				</li>
				<li>
					<a href="#" style="color:#cc9933">Thời trang trẻ em</a><span>/</span>
				</li>
				<li>
					<a href="products.html" style="color:#6970b5">Đồ chơi trẻ em</a><span>/</span>
				</li>
				<li>
					<a href="#" style="color:#d134cf">Khuyến mãi</a><span>/</span>
				</li>
				<li>
					<a href="#" style="color:#609c9e">Sản phẩm mới</a><span>/</span>
				</li>
				<li>
					<a href="#" style="color:#b7cf6c">Khu vui chơi</a>
				</li>
			</ul>
		</div>
	</div>
	
	<div class="row show-for-small" id="alt-menu">
		<table width="100%">
			<tr>
			<td>
				<div id="menu-navigator">
					Trang chủ
				</div>
			</td>
			<td width="150px">
				<input id="searchbox" type="text" placeholder="Tìm kiếm"/>
			</td>
			</tr>
		</table>
		<div id="roll-menu">
			<ul>
				<li>
					<a href="#" style="color:#64bc7f">Trang chủ</a>
				</li>
				<li>
					<a href="#" style="color:#64bc7f">Đồ dùng sơ sinh</a>
				</li>
				<li>
					<a href="#" style="color:#cc9933">Thời trang trẻ em</a>
				</li>
				<li>
					<a href="products.html" style="color:#6970b5">Đồ chơi trẻ em</a>
				</li>
				<li>
					<a href="#" style="color:#d134cf">Khuyến mãi</a>
				</li>
				<li>
					<a href="#" style="color:#609c9e">Sản phẩm mới</a>
				</li>
				<li>
					<a href="#" style="color:#b7cf6c">Khu vui chơi</a>
				</li>
			</ul>
		</div>
	</div>
	<script> <!-- for alt-menu -->
		$(document).ready(function() {
			$('#menu-navigator').click(function() {
				if ($('#roll-menu').css('opacity') == '0') {
					openRollMenu();
				} else {
					closeRollMenu();
				}
			});
			$('#roll-menu a').click(function() {
				closeRollMenu();
			});
			function openRollMenu() {
				$('#roll-menu').css('height:0px');
				$('#roll-menu').animate({height:'200px',opacity:'1'}, 300);
			}
			function closeRollMenu() {
				$('#roll-menu').css('height:200px');
				$('#roll-menu').animate({height:'0px',opacity:'0'}, 300);
			}
		});
	</script>
	
	<!-- end header -->
	
  <div class="row">
		<div id="banner">
			<img src="image/data/banner.png">		
		</div>
	</div>

	<div class="row">
		<div id="features">
			<!-- <ul class="small-block-grid-2 large-block-grid-4"> -->
			<ul class="small-block-grid-2 large-block-grid-4">
				<li>
					<a href="#">
						<img class="hide-for-small" src="image/feature/feature-1.png"/>
						<img class="show-for-small" src="image/feature/feature1-small.png"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img class="hide-for-small" src="image/feature/feature-2.png"/>
						<img class="show-for-small" src="image/feature/feature2-small.png"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img class="hide-for-small" src="image/feature/feature-3.png"/>
						<img class="show-for-small" src="image/feature/feature3-small.png"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img class="hide-for-small" src="image/feature/feature-4.png"/>
						<img class="show-for-small" src="image/feature/feature4-small.png"/>
					</a>
				</li>
			</ul>
		</div>
		<div id="featuresimg"></div>
	</div>
		
	<div class="row">
    <div class="large-12 columns">
			<div id="newproducts">
				<ul class="small-block-grid-2 large-block-grid-8">
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-1.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-2.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-3.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-4.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-5.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-6.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li>
							<a href="#">
							<div class="productimage">
								<img src="image/product/newproduct-7.png"/>
							</div>
							<div class="productdetail">
								<div class="productname">
									Tên sản phẩm
								</div>
								<div class="productdescription">
									Mô tả sản phẩm
								</div>
								<div class="productprice">
									Giá: XXX VNĐ
								</div>
							</div>
							</a>
						</li>
						<li class="more">
							<a href="#" id="moreproduct" >
								<img src="image/product/newproduct-more.png"/>
								<div>Xem tất cả</div>
							</a>
						</li>
				</ul>
			</div> <!-- new product -->
		</div>
	</div>
  <div class="row">
		<div id="footerimg"></div>
    <div id="footer" class="large-12 columns">
			<div id="alt-footer" class="row show-for-small">
					<div class="large-4 columns">
						<div id="contact">
							<a href="#">Liên hệ</a> /
							<a href="#">Thông tin giao hàng</a> /
							<a href="#">Điều lệ trả hàng</a> /
							<a href="#">Thông tin cá nhân</a> /
							<a href="#">Câu hỏi thường gặp</a> /
							<a href="#">Công ty Bim Vy</a> /
							<a href="#">Nghề nghiệp</a> /
							<a href="#">Góp ý</a>
						</div>
					</div>
					<div class="large-4 columns">
							<h3>Liên hệ nhanh</h3>
							<p>XXXXXXXXXXXXXXXX</p>

							<div class="social">
								<a href="#">
								<div class="sociallogo" id="facebooklogo"></div>
								</a>
							</div>
							<div class="social">
								<a href="#">
								<div class="sociallogo" id="twitterlogo"></div>
								</a>
							</div>
							<div class="social">
								<a href="#">
								<div class="sociallogo" id="pinterestlogo"></div>
								</a>
							</div>
							<div class="social">
								<a href="#">
								<div class="sociallogo" id="instagramlogo"></div>
								</a>
							</div>
					</div>
					<div class="large-4 columns">
						<table width="100%">
						<tr>
						<td width="50%">
								© 2013 Bim Vy Co.
						</td>
						<td>
							<div id="copyright">
								<img src="image/data/logo.png"/>
							</div>
						</td>
						</tr>
						</table>
					</div>
			</div>
			<ul class="small-block-grid-1 large-block-grid-4 hide-for-small">
					<li>
						<h3>Đăng ký nhận tin khuyến mãi</h3>
						<div id="mailbox">
							<input type="text" placeholder="Địa chỉ email"/>
						</div>
						<p><a href="#">Liên hệ</a></p>
						<p><a href="#">Thông tin giao hàng</a></p>
						<p><a href="#">Điều lệ trả hàng</a></p>
						<p><a href="#">Thông tin cá nhân</a></p>
						<p><a href="#">Câu hỏi thường gặp</a></p>
						<p><a href="#">Công ty Bim Vy</a></p>
						<p><a href="#">Nghề nghiệp</a></p>
						<p><a href="#">Góp ý</a></p>
					</li>
					<li>
						<h3>Vincom Center (Unit B2-23)</h3>
						<p>70-72 Lê Thánh Tôn, P.Bến Nghé, Q.1</p>
						<p>Tel 08.39 369 068 - 08.38 270 792</p>
						<h3>Maximark Ba Tháng Hai</h3>
						<p>3-3C Đường 3 Tháng 2, Q.10</p>
						<p>Tel 08.38 344 051</p>
						<h3>Maximark Cộng Hòa</h3>
						<p>15-17 Cộng Hòa, Q.Tân Bình</p>
						<p>Tel 08.39 480 912</p>
					</li>
					<li>
						<h3>Liên hệ nhanh</h3>
						<p>XXXXXXXXXXXXXXXX</p>
						<br/>
						<h3>Mạng xã hội</h3>
						<div class="social">
							<a href="#">
							<div class="sociallogo" id="facebooklogo"></div>
							<span>Facebook</span>
							</a>
						</div>
						<div class="social">
							<a href="#">
							<div class="sociallogo" id="twitterlogo"></div>
							<span>Twitter</span>
							</a>
						</div>
						<div class="social">
							<a href="#">
							<div class="sociallogo" id="pinterestlogo"></div>
							<span>Pinterest</span>
							</a>
						</div>
						<div class="social">
							<a href="#">
							<div class="sociallogo" id="instagramlogo"></div>
							<span>Instagram</span>
							</a>
						</div>
						
					</li>
					<li>
						<br/>
						<p>Thương hiệu Kid World được sở hữu bởi công ty Bim Vy, thành lập từ năm 1996. Công ty chuyên cung cấp bán lẻ các mặt hàng trẻ em chất lượng cao.</p>

						<div id="copyright">
							<span>© 2013 Bim Vy Co.</span><img src="image/data/logo.png"/>
						</div>
					</li>
			</ul>
		</div> <!-- footer -->
	</div>

  
  <script src="js/foundation.min.js"></script>
	<script src="js/main.js"></script>
</body>
</html>